<template>
  <div class="weight">
    <h3>体重记录</h3>
    <br />
    <br />
    <hr />

    <div class="demo-date-picker">
      <div class="block">
        <el-date-picker
          v-model="value2"
          type="daterange"
          start-placeholder="2022-11-1"
          end-placeholder="2022-11-8"
          :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
        />

        <el-button class="screen" type="info">筛选</el-button>
      </div>
    </div>
    <br /><br />
    <hr />
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        property="time"
        label="时间"
        width="300"
        align="center"
      />
      <el-table-column
        property="weight"
        label="体重"
        width="260"
        align="center"
      />
    </el-table>
    <el-pagination
      class="paging"
      background
      layout="prev, pager, next"
      :total="total"
      :default-page-size="pageSize"
      hide-on-single-page
      @current-change="pageChange"
    />
  </div>
</template>

<script>
import { getWeight } from '@/api/user'

export default {
  name: 'weight',
  data() {
    return {
      value2: [new Date(2010, 9, 1), new Date(2010, 10, 1)],
      total: 1,
      pageSize: 8,
      tableData: [
        {
          time: '2017',
          weight: '68kg',
        },
        {
          time: '2018',
          weight: '68kg',
        },
        {
          time: '2018',
          weight: '68kg',
        },
        {
          time: '2018',
          weight: '68kg',
        },
        {
          time: '2018',
          weight: '68kg',
        },
        {
          time: '2018',
          weight: '68kg',
        },
        {
          time: '2018',
          weight: '68kg',
        },
      ],
    }},

      methods: {
        pageChange(page) {
    this.userDetail(page)
  },
  // 请求配送记录数据
  async userDetail(page = 1) {
    const res = await getWeight(page)
    console.log(res)
    //@ts-ignore
    const { list, total, pageSize } = res
    this.tableData = list
    this.total = total
    this.pageSize = pageSize
    console.log(this.total)
    console.log(this.pageSize)
  }
},
created() {
  this.userDetail()
}
    }
  
</script>

<style lang="less" scoped>
.weight h3 {
  font-size: 18px;
  font-weight: 600;
  float: left;
  padding-left: 20px;
}

.demo-date-picker {
  float: left;
  margin-left: 20px;
}

.demo-date-picker .block {
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.screen {
  margin-left: 50px;
  margin-bottom: 6px;
  border-radius: 0;
}

.button {
  width: 76px;
  height: 32px;
  border: none;
  margin-left: 10px;
  background-color: #d7d7d7;
}

.paging {
  margin-top: 50px;
  margin-left: 450px;
}
</style>
